<div class="comment-section phl pbl" data-comment-topic-id="${topicBo.topicId}">
	<div class="pbs ui-relative"><span class="fwb fsl">${parentCount} comments </span></div>
	<shiro:authenticated>
	<div data-comment-dom-id="add-comment-form-container" class="comment-composer" >
		<div class="comment-composer-inner">
			<c:choose>
				<c:when test="${currentUser.thumbnailId == null || empty currentUser.thumbnailId}">
					<img data-comment-dom-id="avatar" src="${ctx}/res/images/default_portrait.png" style="display: none;" class="avatar"/>
				</c:when>
				<c:otherwise>
					<img data-comment-dom-id="avatar" src="${ctx}/image/${currentUser.thumbnailId}" style="display: none;" class="avatar"/>
				</c:otherwise>
			</c:choose>
			
			<div data-comment-dom-id="add-comment-textarea-container">
				<form action="${ctx}/comment/add" method="post" data-comment-dom-id="add-comment-form">
					<input type="hidden" name="topicId" value="${topicBo.topicId}" />
					<div class="comment-textarea-outer">
						<textarea data-comment-dom-id="add-comment-textarea" placeholder="Add a comment..." style="height: 14px;"></textarea>
					</div>
					<div data-comment-dom-id="add-comment-submit" class="mts" style="display: none;" align="right"><input type="submit" value="Comment" class="btn style1 small" /></div>
				</form>
			</div>
		</div>
	</div>
	</shiro:authenticated>
	<div data-loadmore-dom-id="loadmore-container">
		<ul class="comment-entry-container" data-comment-dom-id="entry-container" data-loadmore-dom-id="items-container">
			<c:forEach items="${parentCommentBos}" var="parentCommentBo">
				<li data-comment-is-parent="true" data-comment-id="${parentCommentBo.commentId}" class="comment-entry level1">
					<div class="comment-entry-inner">
						<a href="${ctx}/profile/${parentCommentBo.userId}">
							<c:choose>
								<c:when test="${parentCommentBo.userThumbnailId == null || empty parentCommentBo.userThumbnailId}">
									<img src="${ctx}/res/images/default_portrait.png" class="avatar"/>
								</c:when>
								<c:otherwise>
									<img src="${ctx}/image/${parentCommentBo.userThumbnailId}" class="avatar"/>
								</c:otherwise>
							</c:choose>
						</a>
						<div class="comment-content-wrap">
							<div class="comment-content" data-comment-dom-id="entry-content">
								<a class="fwb" href="${ctx}/profile/${parentCommentBo.userId}">${parentCommentBo.userName}</a> - <span class="fcl">${parentCommentBo.displayDate}</span>
								<div>${parentCommentBo.content}</div>
								<shiro:authenticated>
									<div><a href="#add_reply_link">Reply</a></div>
						    		<c:if test="${currentUser.userId == parentCommentBo.userId}">
						    			<div data-comment-dom-id="entry-options" class="options" style="display: none;"><a href="#"></a></div>
						    		</c:if>
					    		</shiro:authenticated>
							</div>
						
							<div data-loadmore-dom-id="loadmore-container" class="comment-reply-container">
								<ul data-comment-dom-id="child-entry-container" data-loadmore-dom-id="items-container">
					    			<c:forEach items="${parentCommentBo.childCommentBos}" var="childCommentBo">
					    				<li data-comment-id="${childCommentBo.commentId}" data-comment-is-parent="false" class="comment-entry level2">
											<div class="comment-entry-inner">
												<a href="${ctx}/profile/${childCommentBo.commentId}"><img src="${ctx}/image/${childCommentBo.userThumbnailId}" class="avatar"/></a>
												<div class="comment-content-wrap">
													<div class="comment-content" data-comment-dom-id="entry-content">
														<a href="${ctx}/profile/${childCommentBo.commentId}" class="fwb">${childCommentBo.userName}</a> - <span class="fcl">${childCommentBo.displayDate}</span>
														<div>${childCommentBo.content}</div>
														<shiro:authenticated>
															<div><a href=#add_reply_link>Reply</a></div>
															<c:if test="${currentUser.userId == childCommentBo.userId}">
												    			<div data-comment-dom-id="entry-options" class="options" style="display: none;"><a href="#"></a></div>
												    		</c:if>
											    		</shiro:authenticated>
													</div>
												</div>
											</div>
										</li>
					    			</c:forEach>
								</ul>
								<div data-loadmore-dom-id="view-more-container" class="comment-children-more" <c:if test="${parentCommentBo.childCount <= fn:length(parentCommentBo.childCommentBos)}">style="display: none;"</c:if> ><a data-loadmore="{ &quot;retrieve_url&quot; : &quot;${ctx}/reply/retrieve&quot; ,&quot;retrieve_params&quot; : { &quot;parent_id&quot; : &quot;${parentCommentBo.commentId}&quot;, &quot;offset&quot; : 3, &quot;order_by&quot; : &quot;DESC&quot;, &quot;cur_showing_no&quot; : ${fn:length(parentCommentBo.childCommentBos)}, &quot;init_total&quot; : ${parentCommentBo.childCount} }, &quot;no_results_msg&quot; : &quot;&quot;, &quot;no_more_results_msg&quot; : &quot;&quot;, &quot;error_msg&quot; : &quot;This stream is unavailable at this time. Please try again soon.&quot; }" href="#">View <span data-loadmore-dom-id="unshown-status">${parentCommentBo.childCount - fn:length(parentCommentBo.childCommentBos)}</span> more <span class="arrow arrow-down arrow-down-lightblue arrow-down-small"></span></a></div>
								<div style="display: none;" align="center" data-loadmore-dom-id="loading-status"><img src="${ctx}/res/images/common/loading.gif"/></div>
								<div style="display: none;" align="center" data-loadmore-dom-id="load-msg"></div>
								<shiro:authenticated>
								<div data-comment-dom-id="add-reply-form-container" class="comment-entry level2" style="display: none;">
									<div class="comment-entry-inner">
										<c:choose>
											<c:when test="${currentUser.thumbnailId == null || empty currentUser.thumbnailId}">
												<img data-comment-dom-id="avatar" src="${ctx}/res/images/default_portrait.png" class="avatar"/>
											</c:when>
											<c:otherwise>
												<img data-comment-dom-id="avatar" src="${ctx}/image/${currentUser.thumbnailId}" class="avatar"/>
											</c:otherwise>
										</c:choose>
										
										<div style="margin: 0 0 8px 58px; min-height: 50px;">
											<form data-comment-dom-id="add-reply-form" action="${ctx}/comment/reply" method="post">
												<input type="hidden" name="topicId" value="${topicBo.topicId}"/>
												<div class="comment-textarea-outer">
													<textarea data-comment-dom-id="add-reply-textarea" placeholder="Add a reply..." style="height: 28px;"></textarea>
												</div>
												<div align="right" class="mts"><input type="submit" class="btn style1 small" value="Comment" /></div>
											</form>
										</div>
									</div>
								</div>
								</shiro:authenticated>
							</div>
						</div>
					</div>
				</li>
			</c:forEach>
		</ul>
		<div data-loadmore-dom-id="view-more-container" <c:if test="${parentCount <= fn:length(parentCommentBos)}">style="display: none;"</c:if> align="center" class="comment-more mts"><a href="#" data-loadmore="{ &quot;retrieve_url&quot; : &quot;${ctx}/comment/retrieve&quot;, &quot;retrieve_params&quot; : { &quot;topic_id&quot; : &quot;${topicBo.topicId}&quot;, &quot;offset&quot; : 10, &quot;order_by&quot; : &quot;DESC&quot;, &quot;cur_showing_no&quot; : ${fn:length(parentCommentBos)}, &quot;init_total&quot; : ${parentCount} }, &quot;no_results_msg&quot; : &quot;NO RESULTS FOUND&quot;, &quot;no_more_results_msg&quot; : &quot;NO MORE RESULTS&quot;, &quot;error_msg&quot; : &quot;This stream is unavailable at this time. Please try again soon.&quot; }">View <span data-loadmore-dom-id="unshown-status">${parentCount - fn:length(parentCommentBos)}</span> more <span class="arrow arrow-down arrow-down-lightblue arrow-down-medium"></span></a></div>
		<div data-loadmore-dom-id="loading-status" class="mts" style="display: none;" align="center"><img src="${ctx}/res/images/common/loading.gif"/></div>
		<div data-loadmore-dom-id="load-msg" class="mts" style="display: none;" align="center"></div>
	</div>
</div>
